<template>
	<view class="main-box">
		<view class="placeholder-box"></view>
		<view class="register-box-form-box" style="width: 320px;">
			<u--form
				labelPosition="left"
				:model="loginModel"
				ref="loginForm"
			>
				<u-form-item label="账号">
					<u--input
						v-model="loginModel.loginInfo.name"
						border="surround"
						clearable
						placeholder="请输入账号"
					></u--input>
				</u-form-item>
				<u-form-item label="密码">
					<u-input
						v-model="loginModel.loginInfo.password"
						:password="loginShowPwd"
						placeholder="请输入密码"
					>
						<template slot="suffix">
							<u-icon name="eye-fill" v-if="loginShowPwd" @click="loginShowPwd = false"></u-icon>
							<u-icon name="eye-off"  v-if="!loginShowPwd" @click="loginShowPwd = true"></u-icon>
						</template>
					</u-input>
				</u-form-item>
			</u--form> 
		</view>
		<view class="flex-box agree-box" @click="cellClick()" :animation="shakeAnimation">
			<image class="agree-icon" :src="agreeIcon" mode=""></image>
			<view class="">我已阅读并同意</view>
			<view class="black-view" @click.stop="serviceClick">《服务协议》</view>
			<view class="">与</view>
			<view class="black-view" @click.stop="privacyClick">《隐私政策》</view>
		</view>
		<view class="confim-btn confirm-agree-btn" @click="loginClick()">登录</view>
		<!-- <view v-show="isAgree" class="confim-btn" :class="isAgree ? 'confirm-agree-btn': ''" @click="startShake">授权手机号登录</view> -->
<!-- 		<button v-show="isAgree" class="confim-btn confirm-agree-btn" type="primary" open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber">授权手机号登录</button> -->
		<view class="other-action-box">
			<view class="un-login-view" @click="unlogin()">暂不登录</view>
			<view class="un-login-view" @click="register()">立即注册</view>
		</view>
		
		<u-popup :show="show" :round="10" :closeOnClickOverlay="false" closeable @close="closePop" @open="openPop">
			<view class="register-box">
				<view class="register-box-header">
					注册
					<!-- <view class="register-box-header-close">
						<u-icon name="close"></u-icon>
					</view> -->
				</view>
				<view class="register-box-form-box">
					<u--form
						labelPosition="left"
						:model="model1"
						:rules="rules"
						ref="uForm"
					>
						<u-form-item label="账号" prop="userInfo.name">
							<u--input
								v-model="model1.userInfo.name"
								border="surround"
								clearable
								placeholder="请输入账号"
							></u--input>
						</u-form-item>
						<u-form-item label="密码" prop="userInfo.password">
							<u-input
								v-model="model1.userInfo.password"
								:password="showPwd"
								placeholder="请输入密码"
							>
								<template slot="suffix">
									<u-icon name="eye-fill" v-if="showPwd" @click="changePwdStatus"></u-icon>
									<u-icon name="eye-off"  v-if="!showPwd" @click="changePwdStatus"></u-icon>
								</template>
							</u-input>
						</u-form-item>
					</u--form>
				</view>
				<view class="register-box-confirm-btn" @click="registerConfirm">立即注册</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		memberLogin ,
		memberRegister, 
		getInfo
	} from '@/api/commen.js'
	import http from '@/comment/vmeitime-http/interface.js'
	export default {
		data() {
			return {
				show: false,
				isAgree: false,
				agreeIcon: '../../static/login/un_choose_icon.png',
				loginShowPwd: true,
				showPwd: true,
				shakeAnimation: {}, // 动画数据
				loginModel: {
					loginInfo: {
						name: "",
						password: ""
					}
				},
				model1: {
					userInfo: {
						name: "",
						password: "",
					}
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				}
			};
		},
		onLoad() {
			
		},
		methods: {
			serviceClick() {
				uni.navigateTo({
					url: '/pages/userAgreement/userAgreement'
				})
			},
			privacyClick() {
				uni.navigateTo({
					url: '/pages/privacyPolicy/privacyPolicy'
				})
			},
			changePwdStatus() {
				this.showPwd = !this.showPwd;
			},
			cellClick(){
				this.isAgree = !this.isAgree;
				if (this.isAgree) {
					this.agreeIcon = '../../static/login/choose_icon.png'
				} else {
					this.agreeIcon = '../../static/login/un_choose_icon.png'
				}
			},
			unlogin(){
				uni.switchTab({
					url: '/pages/tabs/home/home'
				})
			},
			register() {
				this.$refs.uForm.clearValidate();
				this.model1.userInfo.name = "";
				this.model1.userInfo.password = "";
				this.show = true;
			},
			registerConfirm() {
				this.$refs.uForm.validate().then(async res => {
					const params = {
						account: this.model1.userInfo.name,
						password: this.model1.userInfo.password
					}
					memberRegister(params).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '注册成功',
								icon: 'success',
								duration: 2000
							})
							this.show = false;
						}
					})
				})
				
			},
			getPhoneNumber(e) {
				console.log(e);
				var _this = this;
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log("getPhoneNumber 获取手机号code", e);
					var _this = this;
					// _this.wxLogin(e);
				} else {
					uni.showToast({
						title: '获取手机失败',
						icon: 'error',
						duration: 2500
					})
				}
				_this.wxLogin(e);
			},
			wxLogin(phoneData) {
				uni.login({
					provider: 'weixin',
					success(res) {
						const params = {
							code: res.code,
						}
						loginByUserPhoneNumber(params).then(res => {
							console.log(res);
						})
					}
				})
			},
			closePop() {
				this.show = false;
				this.showPwd = true;
			},
			openPop() {},
			async loginClick() {
				if (this.loginModel.loginInfo.name == '') {
					uni.showToast({
						icon:'none',
						title: "请输入账号"
					})
					return;
				}
				if (this.loginModel.loginInfo.password == '') {
					uni.showToast({
						icon:'none',
						title: "请输入密码"
					})
					return;
				}
				if (!this.isAgree) {
					this.startShake();
					return;
				}
				uni.showLoading({
					title: "登陆中..."
				})
				const params =  {
					account: this.loginModel.loginInfo.name,
					password: this.loginModel.loginInfo.password,
				}
				memberLogin(params).then(async res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: "登录成功"
						})
						uni.setStorageSync("token", res.data);
						getApp().globalData.isLogin = true;
						const t = uni.getStorageSync('token')
						const response = await getInfo();
						uni.setStorageSync("userInfo", response.data.member);
						getApp().globalData.userInfo = response.data.member;
						console.log(getApp().globalData, res.data )
						setTimeout(function() {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			startShake() {
			    // 创建动画实例
			    const animation = uni.createAnimation({
			        duration: 100, // 单次动画持续时间
			        timingFunction: 'ease-in-out', // 动画缓动函数
			    });
			
			    // 定义抖动动画
			    animation
			        .translateX(-10).step()
			        .translateX(10).step()
			        .translateX(-5).step()
			        .translateX(5).step()
			        .translateX(0).step();
			
			    // 应用动画
			    this.shakeAnimation = animation.export();
			
			    // 动画结束后清除
			    setTimeout(() => {
			        this.shakeAnimation = {};
			    }, 1000); // 1秒后清除动画
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.main-box{
		position: relative;
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-height: 100vh;
		.placeholder-box {
			width: 320px;
			height: 320px;
			background-color: $theme-color;
		}
		.flex-box{
			display: flex;
			align-items: center;
			gap: 2px;
		}
		.agree-box {
			margin: 10px;
			color: rgba(144, 144, 144, 1);
			font-size: 12px;
			.agree-icon{
				width: 16px;
				height: 16px;
				margin-right: 3px;
			}
			.black-view{ 
				color: #000;
			}
		}
		.confim-btn{
			margin-top: 5px;
			background-color: rgba(248, 248, 248, 1);
			color: rgba(0, 0, 0, .5);
			width: 320px;
			height: 44px;
			line-height: 44px;
			text-align: center;
			border-radius: 8px;
		}
		.confirm-agree-btn { 
			color: white;
			background: linear-gradient(to right, #dc492f 50%, #DC0000 100%);
		}
		.other-action-box{
			width: 320px;
			height: 40px;
			display: flex;
			align-items: center;
			.un-login-view{
				margin-top: 20px;
				// text-decoration: underline;
				color: rgba(144, 144, 144, 1);
				font-size: 14px;
				flex: 1;
				text-align: center;
			}
		}
	}
	.register-box{
		padding: 0px 20px;
		padding-top: 10px;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		flex-direction: column;
		gap: 16px;
		&-header {
			height: 40px;
			line-height: 40px; 
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			position: relative;
			&-close {
				position: absolute;
				right: 10px;
				top: 5px;
				height: 30px;
				width: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		&-form-box {
			// margin: 16px;
			// min-height: 50px;
			display: flex;
			flex-direction: column;
			gap: 16px;
			.r-form-item {
				
			}
		}
		&-confirm-btn {
			// margin-top: 16px;
			background-color: $theme-color;
			color: #fff;
			height: 44px;
			line-height: 44px;
			text-align: center;
			border-radius: 8px;
		}
	}
</style>	
